<template>
  <div>
    <el-carousel arrow="always" :autoplay="false" height="200px" trigger="click">
      <el-carousel-item v-for="(item,index) in images" :key="images.index">
        <img :src="item" :key="index" width="291" height="196"  style="cursor: pointer">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
  import Viewer from 'viewerjs'
  import 'viewerjs/dist/viewer.css'

  export default {
    props: {
      images: {
        type: Array,
        default: function () {
          return [];
        }
      },
      trigger: {},
      options: {
        type: Object
      }
    },
    data() {
      return {}
    },
    computed: {},
    methods: {
      createViewer() {
        this.$viewer && this.$viewer.destroy()
        this.$viewer = new Viewer(this.$el, this.options)
       //this.$viewer.show(true);
      }
    },
    watch: {
      images() {
        this.$nextTick(() => {
          this.createViewer()
        })
      },
      trigger: {
        handler: function () {
          this.$nextTick(() => {
            this.createViewer()
          })
        },
        deep: true
      },
      options: {
        handler: function () {
          this.$nextTick(() => {
            this.createViewer()
          })
        },
        deep: true
      }
    },
    mounted() {
       this.createViewer()
    },
    destroyed() {
      this.$viewer && this.$viewer.destroy()
    }
  }
</script>

<style scoped>

</style>
